import React from "react";
import styles from '@/assets/css/order_info.module.css';
import type order from "@/types/order";
import type guest from "@/types/guest";

interface OrderInfo extends order
{
    content:string;
    rate:number;
}

export default function Info()
{
    const [SearchParams] = useSearchParams();

    const [orderid] = useState<string>(SearchParams.get('orderid') ?? '');
    const [order,SetOrder] = useState<OrderInfo>({
        room:{}
    } as OrderInfo);
    const [guest, SetGuest] = useState<guest[]>([]);

    const GetOrderInfo = async () =>
    {
        const params = {
            busid:React.business.id,
            orderid
        }

        const result = await React.http.post('/order/info',params);

        if(result.code === 1)
        {
            SetOrder(result.data.order);
            SetGuest(result.data.guest);
        }else{
            React.fail(result.msg,() => React.navigate(-1));
        }
    }

    useEffect(() =>
    {
        GetOrderInfo();
    },[orderid]);

    // 评论显示的视图
    const CommentView = () =>
    {
        if(order.status != "4" || order.content == "")
        {
            return (<></>)
        }
        
        return (
            <div className={styles.info_footer}>
                <div className={styles.content_title}>评价信息：</div>
                <div className={styles.comment}>
                    <React.UI.Rate value={order.rate} readOnly />

                    <React.UI.Divider
                        style={{
                            color: '#1677ff',
                            borderColor: '#1677ff',
                            borderStyle: 'dashed',
                        }}
                    ></React.UI.Divider>

                    <React.UI.TextArea className='textarea' placeholder="请输入评论内容" defaultValue={order.content} readOnly />
                </div>
            </div>
        )
    }
    
    return (
        <>
            <div className={styles.order_info}>
                {/* 订单信息 */}
                <div className={styles.info_content}>
                    <div className={styles.content_title}>订单信息：</div>
                    <div className={styles.content_item}>
                        <p>入住时间</p>
                        <div>{order.starttime_text} {order.startday_text} - {order.endtime_text}  {order.endday_text}</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>入住天数</p>
                        <div>共 {order.order_day} 晚</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>订单价格</p>
                        <div className={styles.content_price}>￥{order.price}</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>房间单价</p>
                        <div className={styles.content_price}>￥{order.room.price}</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>支付方式</p>
                        <div>{order.type_text}</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>入住人数</p>
                        <div>{guest.length} 人</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>订单备注</p>
                        <div>{order.remark}</div>
                    </div>
                </div>

                {/* 房间信息 */}
                <div className={styles.info_footer}>
                    <div className={styles.content_title}>房屋信息：</div>
                    <div className={styles.detail}>
                        <div className={styles.thumb}>
                            <Link to={`/room/info?roomid=${order.roomid}`}>
                                <img src={order.room.thumb_text} alt="" />
                            </Link>
                        </div>
                        <div className={styles.right}>
                            <p>{order.room.name}</p>
                            <p>￥{order.room.price}</p>
                            <div className={styles.tips}>
                                {order.room.flag_text && order.room.flag_text.map((flag: string, index: number) => <React.UI.Tag key={index} color='primary'>{flag}</React.UI.Tag>)}
                            </div>
                        </div>
                    </div>
                </div>

                {/* 住客信息 */}
                <div className={styles.info_footer}>
                    <div className={styles.content_title}>住客信息：</div>
                    <div className={styles.detail}>
                        <React.UI.List className={styles.list}>
                            {guest.map((item: guest) => (
                                <React.UI.List.Item
                                    key={item.nickname}
                                    description={`手机号码：${item.mobile}`}
                                >
                                    {item.nickname}({item.gender_text})
                                </React.UI.List.Item>
                            ))}
                        </React.UI.List>
                    </div>
                </div>
                            
                {/* 评论 */}
                <CommentView />
            </div>
        </>
    )
}